<template>
  <div class="card">
    <img src="../../../assets/images/vip/vip_lv0.png" class="vip-lv" />
    <div class="user">
      <img
        src="../../../assets/images/default_avator.svg"
        class="user-avatar"
      />
      <p class="user-name">{{ vueState.pageInfo.nickName || 'NickName' }}</p>
    </div>
    <div class="level">
      <p class="level-tip">{{$t('Upgrade to enjoy service')}}</p>
      <div class="level-progress">
        <div class="level-rate">
          <div class="level-rate-value"></div>
          <div class="level-rate-flex"></div>
        </div>
      </div>
      <div class="x3 aic" style="width:1.82rem">
        <span class="level-num op63">LV.{{ level }}</span>
        <span class="x aic">
          <img src="../../../assets/images/vip/vip_win.png" class="vip-win" />
          <span class="level-num">LV.{{ level + 1 }}</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { inject, ref } from "vue";
export default {
  setup() {
    const vueState = inject("vueState");
    const level = ref(0);
    return {
      vueState,
      level,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../class.less";
.card {
  height: 1.7rem;
  background-image: url("../../../assets/images/vip/vip_card.png");
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 0.16rem;
  margin: 0.16rem 0.16rem 0.32rem;
  position: relative;
  padding: 0.24rem 0 0.14rem 0.2rem;
  .y3;
  .vip-lv {
    width: 1.1rem;
    height: 1.1rem;
    position: absolute;
    right: 0;
    top: 0;
  }
  .user {
    .x;
    .aic;
    &-avatar {
      width: 0.4rem;
      height: 0.4rem;
      opacity: 1;
      border: 2px solid rgba(255, 255, 255, 0.53);
      border-radius: 50%;
      margin-right: 0.1rem;
    }
    &-name {
      font-size: 0.2rem;
      font-weight: 700;
      color: #3e1919;
      letter-spacing: 0px;
    }
  }
  .level {
    // width: 1.82rem;
    &-tip {
      height: 0.2rem;
      font-size: 0.12rem;
      font-weight: 400;
      color: #883e09;
      line-height: 0.2rem;
      letter-spacing: 0px;
      margin-bottom: 0.08rem;
    }
    &-progress {
      width: 1.82rem;
      height: 0.06rem;
      border-radius: 0.03rem;
      position: relative;
      overflow: hidden;
      margin-bottom: 0.03rem;
    }
    &-rate {
      width: 100%;
      height: 100%;
      background: linear-gradient(267deg, #ffca64 0%, #ff922e 100%);
      position: absolute;
      left: 0;
      top: 0;
      .x;
      .aic;
      &-value {
        width: 50%;
        height: 100%;
        background: linear-gradient(267deg, #ffca64 0%, #ff922e 100%);
      }
      &-flex {
        flex: 1;
        background: #565557;
        height: 100%;
      }
    }
    &-num {
      line-height: 0.28rem;
      font-size: 0.14rem;
      font-weight: 700;
      color: #883e09;
      letter-spacing: 0px;
    }
    .op63 {
      opacity: 0.63;
    }
    .vip-win {
      height: 0.32rem;
      width: 0.32rem;
    }
  }
}
</style>
